import { defineStore } from 'pinia';

// 引入数据
import { useDragStore } from './drag';

// 引入工具函数
import { deepCopy, deepMerge, uuid } from '@/utils/index';

export const useDesignerStore = defineStore('designerStore', {
  state: () => ({
    data: {
      state: false, // 设计状态
      device: 'pc', // 驱动
      leftWidth: 266, // 左侧布局宽度
      rightWidth: 360, // 右侧布局宽度
      // 侧边模块
      module: {
        active: 'base', // 模块激活项
        // 选项列表
        listOption: [
          { label: '基础', value: 'base', icon: 'el-icon-Edit' },
          { label: '布局', value: 'layout', icon: 'el-icon-Edit' },
          { label: '组件', value: 'component', icon: 'el-icon-Edit' },
          { label: '其他', value: 'other', icon: 'el-icon-Edit' },
        ],
        //基础模块
        base: {
          active: 'component', // 选项激活项
          // 选项列表
          listOption: [
            { label: '组件', value: 'component' },
            { label: '大纲', value: 'outline' },
          ],
        },
      },
      // 表单配置
      configForm: {
        activeTab: 'form', // 标签激活项 form=表单配置  component=组件配置
      },
      // 选择的字段
      findSelect: {
        component: null, // 当前选择的组件
        number: null, // 当前选择的组件编号
        key: null,
      },
      // 操作记录
      operation: {
        idx: -1, // 操作记录索引
        list: [] as Array<Record<string, any>>, // 操作记录列表
      },
      // 语言配置
      language: {},
      editForm: {
        disabled: false,
      },
    },
  }),
  actions: {
    /**
     * 调整左侧面板宽度的拖动处理方法
     * @param {*} e  为鼠标按下事件对象
     * @param {*} sing 标识
     */
    setLeftWidth(e: MouseEvent, sing: 'left' | 'right') {
      // 鼠标移动时的宽度调整逻辑
      const handleMouseMove = (e: MouseEvent) => {
        // 计算鼠标水平移动的偏移量（当前X坐标 - 初始按下时的X坐标）
        const delta = sing == 'left' ? e.clientX - startX : startX - e.clientX;
        if (sing == 'left') {
          // 根据偏移量更新左侧面板宽度（初始宽度 + 偏移量）
          this.data.leftWidth = initialWidth + delta;
          // 限制最小宽度为266px（防止宽度过小影响使用）
          if (this.data.leftWidth < 266) this.data.leftWidth = 266;
        } else if (sing == 'right') {
          // 根据偏移量更新左侧面板宽度（初始宽度 + 偏移量）
          this.data.rightWidth = initialWidth + delta;
          // 限制最小宽度为380px（防止宽度过小影响使用）
          if (this.data.rightWidth < 380) this.data.rightWidth = 380;
        }
      };

      // 鼠标释放时的清理逻辑（停止拖动）
      const handleMouseUp = () => {
        // 移除鼠标移动和释放的全局监听，避免持续触发
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };

      // 初始化拖动相关变量
      const startX = e.clientX; // 鼠标按下时的初始X坐标
      const initialWidth = sing == 'left' ? this.data.leftWidth : this.data.rightWidth; // 拖动前的初始左侧宽度

      // 添加全局事件监听：鼠标移动时调整宽度，鼠标释放时停止拖动
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    },

    addOperation() {
      // 获取拖拽数据存储实例
      const dragStore = useDragStore();

      let dragData = deepCopy(dragStore.data);

      // 历史记录索引递增
      this.data.operation.idx++;

      this.data.operation.list.push(dragData);
    },
  },
});
